// 添加全局点击监听
import {message} from "@/utils/ElmessasgeUtils";

export function UserClickListen() {
    document.addEventListener('click', (event) => {
        const target = event.target as HTMLElement

        // 获取最接近的 Vue 组件实例
        const getComponentName = (el: HTMLElement | null): string | null => {
            while (el) {
                // Vue 3 会在元素上添加 __vueParentComponent 或 __vue_app__ 等属性
                if (el.__vueParentComponent) {
                    return el.__vueParentComponent.type.name ||
                        el.__vueParentComponent.type.__name ||
                        el.__vueParentComponent.type.displayName ||
                        'AnonymousComponent'
                }
                el = el.parentElement
            }
            return null
        }

        // 获取 DOM 标签名
        const tagName = target.tagName.toLowerCase()

        // 获取 Vue 组件名
        const componentName = getComponentName(target)

        console.log('DOM标签名:', tagName)
        console.log('Vue组件名:', componentName)

        // 判断是否可点击元素
        const isClickable = target.closest(
            'button, [role="button"], [role="tab"], .clickable, a, input[type="button"], input[type="submit"]'
        )

        if (isClickable) {
            console.log('可点击元素被点击:', {
                domTag: tagName,
                componentName: componentName,
                text: target.textContent?.trim(),
                classes: target.className,
                dataset: target.dataset
            })
            // message(target.textContent?.trim())
        }
    })
}

